// List

@import '../../style/themes/default';
@import '../../style/mixins/index';
@import './param';

@mixin list {
  width: 100%;
  cursor: pointer;
  &:focus {
    outline: none;
  }
  &.cdk-drop-list-dragging {
    > x-list-option {
      &:hover {
        background-color: transparent;
      }
      &.cdk-drag-placeholder {
        border-color: $--x-border;
        color: $--x-text-400;
        background-color: $--x-background-a100;
        opacity: 0.9;
      }
      &:not(.cdk-drag-placeholder) {
        transition: transform $--x-animation-duration-base cubic-bezier(0, 0, 0.2, 1);
      }
    }
  }

  &-leaf,
  &-checked {
    right: 0;
    margin-left: 0.4rem;
    color: $--x-text-400;
  }
  &-icon > span x-icon {
    color: $--x-text-300;
    margin-right: 0.25rem;
  }
}

@mixin list-option {
  @include option();
  transition: border-color $--x-animation-duration-base,
    background-color $--x-animation-duration-base, color $--x-animation-duration-base;
  > span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
    user-select: none;
  }
  &:not(:first-child) {
    margin-top: $--x-border-width;
  }
  &:hover,
  &.x-active {
    background-color: $--x-background-a300;
  }
  &.x-list-divided {
    margin-top: 0.8125rem;
    &::before {
      content: ' ';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      margin-top: -0.5rem;
      border-top: $--x-border-base;
    }
  }
  &.x-selected {
    background-color: $--x-background-a300;
    color: $--x-primary;
    > x-icon {
      color: $--x-primary;
    }
  }
  &.x-disabled {
    color: var(--x-text-500);
    cursor: not-allowed;
    &:hover {
      background-color: inherit;
    }
    > span x-icon {
      color: var(--x-text-500);
    }
  }
}

@mixin option {
  padding: 0 0.4rem;
  height: $--x-list-height;
  line-height: $--x-list-height;
  border-radius: $--x-border-radius;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0.0625rem dashed transparent;
}

@mixin body-list-option {
  display: block;
  &.cdk-drag-preview {
    .#{$--x-list-option-prefix} {
      @include option();
      border-color: $--x-primary;
      color: $--x-primary;
      background-color: $--x-background;
      opacity: 0.8;
    }
  }
  &.cdk-drag-animating {
    transition: transform $--x-animation-duration-base cubic-bezier(0, 0, 0.2, 1);
  }
}
